<template>
    <div class="course-source">
        <div class="course-source-header">
            <span>课程资源列表</span>
            <div class="uploadbtn">
                <el-button type="primary" :icon="UploadTwo" @click="isdialog = true"></el-button>
            </div>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item variant="text" style="width: 100%;height: 300px;" />
            </template>
            <template #default>
                <div class="course-source-list">
                    <el-table :data="sourlist" height="280" :show-header="false" empty-text="暂无资源">
                        <el-table-column width="50">
                            <template #default="scope">
                                <span>
                                    <el-image :src="iconurl(scope.row.type)" />
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip>
                            <template #default="scope">
                                <div class="file-content">
                                    <div>{{ scope.row.name }}</div>
                                    <div>{{ scope.row.createTime }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template #default="scope">
                                <el-text>上传人:{{ scope.row.user.username }}</el-text>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip>
                            <template #default="scope">
                                <el-text>{{ scope.row.introduce }}</el-text>
                            </template>
                        </el-table-column>
                        <el-table-column align="center">
                            <template #default="scope">
                                <el-text truncated style="margin-top: 10px;">{{ scope.row.size }}</el-text>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template #default="scope">
                                <div class="options">
                                    <el-link type="primary" @click="previewbtn(scope.row)">在线预览</el-link>
                                    <el-divider direction="vertical" />
                                    <el-link type="primary" @click="downloadbtn(scope.row)">下载</el-link>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-skeleton>
        <el-drawer v-model="isdrawer" direction="ltr" destroy-on-close size="100%"
            :show-close="previewtype !== 'el-image-viewer'">
            <PreviewCompoonent :comtype="previewtype" :url="previewUrl" @closepreview="handleclose" />
        </el-drawer>
        <el-dialog v-model="isdialog" width="780" center>
            <UploadFileComponent ref="uploadRef" :ismul="false" :file-introd="fileintroduce" :islim="1"
                :course-id="courseinfo.id" @uploademit="uploademit" />
            <div class="file-handle">
                <span>文件简介:</span>
                <el-input v-model="fileintroduce"></el-input>
            </div>
            <template #footer>
                <el-button type="primary" @click="uploadCour">上传</el-button>
                <el-button @click="isdialog = false"> 取消 </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { UploadTwo } from "@icon-park/vue-next";
import { ref } from "vue";
import UploadFileComponent from "@components/UploadFileComponent/UploadFileComponent.vue";
import { iconurl } from "@utils/filetype";
import { useCourseInfo } from "@store/courseinfo";
import { storeToRefs } from "pinia";
import { Tsourcefile } from "@/models/sourcefile";
import { course_code, get_file } from "@/api/courseapi";
import { CompType } from "@components/PreviewComponent/type";
import { get_user } from "@/api/userapi";
import { ElMessage } from "element-plus";
import { useUserInfo } from "@store/userinfo";

const { sourlist, courseinfo } = storeToRefs(useCourseInfo());
const { userinfo } = storeToRefs(useUserInfo());

const { loading } = defineProps<{
    loading: boolean
}>()

const fileintroduce = ref<string>("");
const isdialog = ref<boolean>(false);
const isdrawer = ref<boolean>(false);
const previewtype = ref<CompType>();
const previewUrl = ref<string>("");
const uploadRef = ref<InstanceType<typeof UploadFileComponent>>()

//关闭子组件的预览，关闭窗口
const handleclose = (value: boolean) => {
    isdrawer.value = value;
};

const uploadCour = () => {
    isdialog.value = false;
    uploadRef.value.uploadFileInfo()
}

const uploademit = async (uploadinfo: Tsourcefile[]) => {
    if (uploadinfo.length) {
        uploadRef.value.fileList = [];
        fileintroduce.value = "";
        await updateCode(+2);
        ElMessage.success("资源上传成功！");
        const res = await get_user({ id: uploadinfo[0].userId });
        if (res.code === 200) {
            uploadinfo[0].user = res.data;
            sourlist.value.push(uploadinfo[0]);
        }
    }
}

const downloadbtn = async (file: Tsourcefile) => {
    if (await updateCode(-1)) {
        const res = await get_file({ fileName: `${file.fileMd5}-${file.name}` });
        if (res.code === 200) {
            const link = document.createElement("a");
            link.href = res.data;
            link.download = file.name;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

const updateCode = async (Code: number) => {
    const res = await course_code({ code: Code, userId: userinfo.value.id });
    if (res.code === 200) {
        userinfo.value.code += Code;
        return true;
    }
    ElMessage.error(res.msg);
    return false;
}

const previewbtn = async (file: Tsourcefile) => {
    const res = await get_file({ fileName: `${file.fileMd5}-${file.name}` });
    if (res.code === 200) {
        previewUrl.value = res.data;
        switch (file.type) {
            case "application/pdf":
                isdrawer.value = true;
                previewtype.value = "vue-office-pdf";
                break;
            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                isdrawer.value = true;
                previewtype.value = "vue-office-docx";
                break;
            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                isdrawer.value = true;
                previewtype.value = "vue-office-excel";
                break;
            case (file.type.match(/^image/) || {}).input:
                //图片文件处理
                isdrawer.value = true;
                previewtype.value = "el-image-viewer";
                break;
            default:
                ElMessage.error("暂不支持预览这个格式的文件！");
                return
                break;
        }
    }
}

</script>

<style scoped lang="less">
.course-source {
    width: 900px;
    margin-top: 20px;

    .course-source-header {
        height: 33px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            margin-left: 20px;
            font-weight: 300;
            font-size: 18px;
        }
    }

    .course-source-list {
        .file-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            div {
                font-size: 13px;
                font-weight: 300;

                &:first-child {
                    color: #2a97d1;
                }
            }
        }
    }

    .uploadbtn {
        margin-right: 20px;
    }

    .file-handle {
        margin-top: 20px;
        display: flex;
        align-items: center;

        span {
            width: 80px;
        }
    }
}
</style>
